<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        table, th, td {
            border: 1px solid black;
        }

       th, td {
            width:3px ; /* 设置宽度为300像素 */
            height: 100px; /* 设置高度为300像素 */
            padding: 0px;
            text-align: center;
        }
        .image-container {
            position: relative;
        }

        .overlay-button1 {
            position: absolute; /* 使用绝对定位 */
            top: 0; /* 距离顶部为0 */
            left: 0; /* 距离左侧为0 */
        }
          .overlay-button2 {
            position: absolute; /* 使用绝对定位 */
            top: 0; /* 距离顶部为0 */
            left: 0; /* 距离左侧为0 */
        }

    </style>
    <title>Watermark Embedding and Extraction</title>
</head>
<body>
 <h1 style="text-align: center;">水印嵌入和提取系统</h1>
    <table>
        <tr>
    <td>
        <div class="image-container">
            <input type="file" id="carrierInput" accept="image/*" style="display: none;">
            <img id="carrierImage" src="" style="width: 300px; height: 300px;">
            <button id="selectCarrier" class="overlay-button1">Choose Carrier Image</button>
        </div>
    </td>
    <td>
        <div class="image-container">
            <input type="file" id="secretInput" accept="image/*" style="display: none;">
            <img id="secretImage" src="" style="width: 300px; height: 300px;">
            <button id="selectSecret" class="overlay-button2">Choose Secret Image</button>
        </div>
    </td>
</tr>
        <tr>
            <td colspan="2">
                <button id="embedWatermark">Embed Watermark</button>
                <button id="extractWatermark">Extract Watermark</button>
            </td>
        </tr>
        <tr>
            <td>
                <p>Embedded Watermark Image:</p>
                <img id="embeddedImage" src="" style="width: 300px; height: 300px;">
            </td>
<!--            <td>-->
<!--                <p>Extracted Watermark:</p>-->
<!--                <p id="extractedWatermark"></p>-->
<!--            </td>-->
            <td>
                <p>Extracted Watermark Image:</p>
                <img id="extractedWatermarkImage" src="" style="width: 300px; height: 300px;">
            </td>
        </tr>
    </table>
    <script>
        document.getElementById('selectCarrier').addEventListener('click', () => {
            document.getElementById('carrierInput').click();
        });

        document.getElementById('selectSecret').addEventListener('click', () => {
            document.getElementById('secretInput').click();
        });

        document.getElementById('carrierInput').addEventListener('change', (event) => {
            const file = event.target.files[0];
            const url = URL.createObjectURL(file);
            document.getElementById('carrierImage').src = url;
        });

        document.getElementById('secretInput').addEventListener('change', (event) => {
            const file = event.target.files[0];
            const url = URL.createObjectURL(file);
            document.getElementById('secretImage').src = url;
        });

        document.getElementById('embedWatermark').addEventListener('click', async () => {
            if (!document.getElementById('carrierInput').files[0]) {
                alert('Please select a carrier image.');
                return;
            }

            if (!document.getElementById('secretInput').files[0]) {
                alert('Please select a secret image.');
                return;
            }

            const carrierFormData = new FormData();
            carrierFormData.append('file', document.getElementById('carrierInput').files[0]);

            const secretFormData = new FormData();
            secretFormData.append('file', document.getElementById('secretInput').files[0]);

            const carrierResponse = await fetch('/upload_carrier', {
                method: 'POST',
                body: carrierFormData
            });

            const secretResponse = await fetch('/upload_secret', {
                method: 'POST',
                body: secretFormData
            });

            const carrierData = await carrierResponse.json();
            const secretData = await secretResponse.json();

            if (carrierData.success && secretData.success) {
                const embedResponse = await fetch('/embed_watermark', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({})
                });

                const embedData = await embedResponse.json();
                if (embedData.success) {
                    alert('Watermark embedded successfully');

                    // 更新嵌入图像的src
                    const embeddedImage = document.getElementById('embeddedImage');
                    embeddedImage.src = 'data:image/bmp;base64,' + embedData.result;
                } else {
                    alert('Watermark embedding failed.');
                }
            } else {
                alert('Failed to upload carrier or secret image.');
            }
        });

        document.getElementById('extractWatermark').addEventListener('click', async () => {
            const response = await fetch('/extract_watermark', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({})
            });

            const data = await response.json();
            if (data.success) {
<!--                document.getElementById('extractedWatermark').textContent = data.result;-->

                // 更新提取的水印图像的src
                const extractedWatermarkImage = document.getElementById('extractedWatermarkImage');
                extractedWatermarkImage.src = 'data:image/bmp;base64,' + data.result;
            } else {
                alert('Watermark extraction failed.');
            }
        });
    </script>
</body>
</html>
